<template>
	<div class="previewIn">
	<div class="preview">
		<div class="preTitle">预览模式</div>
		<div class="preWrapper">
			<div class="preIframe">
				<component @updateView="updateView" :is="currentView"></component>
			</div>
		</div>
		<div class="preBtn">
			<button type="button" class="preBtnInt" @click="closePreView">退出预览模式</button>
		</div>
	</div>
	</div>
</template>

<script type="javascript/ecmascript6">
import GoodsComponent from '@/components/mobilecomponent/mgoodscomponent.vue'
import StoresComponent from '@/components/mobilecomponent/mstorescomponent.vue'
import GoodsdetailComponent from '@/components/mobilecomponent/mgoodsdetailcomponent.vue'

export default{
  name: 'preview',
  data () {
  	return {
  	  currentView: 'goods'
  	}
  },
  components: {
    'goods': GoodsComponent,
    'stores': StoresComponent,
    'goodsdetail': GoodsdetailComponent
  },
  methods: {
  	closePreView () {
  	  this.$router.back()
  	},
  	updateView (name) {
  	  this.currentView = name
  	}
  }
}
</script>

<style type="text/css" scoped>	
.preTitle{
		color: #8f8f8f;
		font-size: 18px;
		line-height: 25px;
		margin-bottom: 15px;
		text-align: center;
		letter-spacing: 2px;
	}
	.preWrapper{
		max-height: 534px;
		z-index: -1;
	}

	
.previewIn{
  box-sizing: border-box;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
  position: relative;
  text-align: center;
  width: 32.6%;
}
.previewIn{
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  background: #F2F2F2;
  width: 100%;
  transition: width .4s;
}
	.preview .preIframe{
		box-shadow: 0 0 10px 0 rgba(51,51,51,.2);
		height: 667px;
		margin: 0 auto;
		transform: scale(.8);
		transform-origin:center 0;
		width: 375px;
		overflow: hidden;
		z-index: -1;
	}
	.preBtn{
		margin-top: 50px;
		text-align: center;
	}
	.preBtnInt{
		border-radius: 4px;
		padding: 12px 15px;
		width: 280px;
		border: none;
		color: #fff;
		background: #F54D4F;
		letter-spacing: 2px;
		outline: none;
		cursor: pointer;
	}
</style>
